<template>
  <div class="box">
    <el-form-item label="账号" prop="username">
      <el-input type="text" v-model="loginFrom.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginFrom.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
      <el-input @keydown.native.enter="submitForm('loginFrom')" v-model="loginFrom.captcha" maxlength="5"
        class="captcha"></el-input>
      <span @click="oncaptcha">
        <i v-html="Captcha"></i>
      </span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="shobox" @click="submitForm('loginFrom')">提交</el-button>
    </el-form-item>
    <h1 class="qiehuanduanxin">
      <i class="el-icon-phone-outline"></i>
      <a href="javascript:;" @click="isSmsLogin1">切换短信登录</a>
    </h1>
  </div>
</template>

<script>
import * as api from "@/api/users.js"
export default {
  created() {
    this.getCaptcha()
  },
  data() {
    return {

      loginFrom: {
        username: "",
        password: "",
        captcha: "",
      },
      Captcha: "",//验证码
      isSmsLogin: false,
    };
  },
  watch: {
    loginFrom: {
      handler(nweval) {
        // console.log(nweval);
        this.$emit("SyncLoginfom", nweval);
      },
      deep: true,
    },
  },
  methods: {

    // 获取验证码
    getCaptcha() {
      api.getCaptcha().then((res) => {
        this.Captcha = res.data.img;
      });
    },
    // 点击切换验证码
    oncaptcha() {
      this.getCaptcha();
    },
    submitForm() {
      this.$emit("submit");
    },
    isSmsLogin1() {
      this.isSmsLogin = this.isSmsLogin ? false : true;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  margin-top: 12%;
  position: relative;

  /deep/.el-form-item__label {
    color: white;
  }

  .el-icon-s-grid {
    font-size: 65px;
    position: absolute;
    top: -39%;
    color: white;
    right: -5px;
    cursor: pointer;
  }

  .el-input__suffix {
    right: 75px;
  }

  .el-input {
    font-size: 17px;
  }

  /deep/.el-input__inner {
    width: 200px;
    height: 40px;
  }

  .box {
    display: flex;
    flex-direction: column;
  }

  .shobox {
    background: linear-gradient(90deg, #1596fb, #002dff);
    width: 200px;
  }

  /deep/.qiehuanduanxin {
    text-align: center;

    // margin-bottom: 20px;
    .el-icon-phone-outline {
      font-size: 20px;
      color: white;
    }

    a {
      // text-decoration: none !important;s
      color: white !important;
      font-size: 17px;
    }
  }

  .captcha {
    // width: 100px !important;
    position: relative;

    /deep/.el-input__inner {
      width: 100px !important;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      border: none;
    }
  }

  span {
    display: inline-block;
    width: 100px;
    height: 40px;
    background: white;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    cursor: pointer;
    position: absolute;
    top: -1%;
    left: 37%;

    /deep/svg {
      width: 100px !important;
      height: 40px !important;
    }
  }
}
</style>
